<template>
  <div class="coms-page">
    <h1>FGPcForm PC端表单渲染</h1>
    <div class="text1">
      用于展示、填报由表单编辑器生成的表单，表单样式基于
      <ELink />
    </div>
    <el-card header="演示">
      <FGPcForm ref="FGPcForm" v-model="form" :options="options" />
      <div style="text-align: center">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </div>
    </el-card>
    <el-card header="代码">
      <Code :code="pcFormCode" />
    </el-card>
    <el-card header="Attributes">
      <Attributes :data="formAttributes" />
    </el-card>
    <el-card header="Methods">
      <Methods :data="formMethods" />
    </el-card>
  </div>
</template>

<script>
import { formAttributes, formMethods, pcFormCode } from "@/utils/comsData";
import { data } from "@/utils/defaultValue";
import Attributes from "./components/Attributes";
import Methods from "./components/Methods";
import FGPcForm from "@/package/FGPcForm";
import Code from "@/components/code/Code.vue";
import { deepClone } from "../../components/formGenerator/utils";
import store from "@/store";
import formdata from "@/api/temp.js"
export default {
  components: { Attributes, Methods, FGPcForm, Code },
  data() {
    return {
      formAttributes,
      formMethods,
      pcFormCode,
      // form: store.state.app.formData || JSON.stringify(data),
      form: formdata
    };
  },
  computed: {
    options() {
      return {
        header: {
          "access-ecs-token": store.state.user.token,
          "system-type": store.state.user.systemType,
        },
      };
    },
  },
  methods: {
    submitForm() {
      this.$refs["FGPcForm"].validateForm((valid, form, value) => {
        if (valid) {
          console.log("提交", form, JSON.parse(value));
          // 表单校验通过
          store.commit("SET_FORMDATA", deepClone(value));
        } else {
          console.log("表单校验失败");
        }
      });
    },
    resetForm() {
      this.$refs["FGPcForm"].resetForm();
    },
  },
};
</script>

<style lang="scss" scoped></style>
